import React, {useState, useEffect} from 'react'
import { Tabs } from 'react-vant'
import NavBar from '@components/NavBar'
import './styles/index.less'

const Order = (props) => {
  useEffect(() => {
  }, [])

  const { listBuy } = props.state
  const renderContent = (status) => {
    const Item = (props) => {
      const { data } = props
      console.log(data)
      const good = props.state.listGoods.find(item => item.id === data.goodId)
      console.log('good', good)
      return (
        <div className="order-item">
          <p>
            <span>{good.name}</span>
            <span>${data.amount}</span>
          </p>
          <p>
            <span>{good.a}{good.b}{good.c}{good.d}</span>
            <span>{data.createdAt}</span>
          </p>
        </div>
      )
    }

    if (status === 0) {
      if (listBuy.length === 0) return <div className="empty">暂无数据</div>

      return listBuy.map(item => <Item {...props} data={item} />);
    }

    if (status === 1) {
      if (listBuy.filter(item => item.status === '1').length === 0) return <div className="empty">暂无数据</div>

      return listBuy.filter(item => item.status === '1').map(item => <Item {...props} data={item} />);
    }

    if (status === 2) {
      if (listBuy.filter(item => item.status === '2').length === 0) return <div className="empty">暂无数据</div>

      return listBuy.filter(item => item.status === '2').map(item => <Item {...props} data={item} />);
    }
    if (status === 3) {
      if (listBuy.filter(item => item.status === '3').length === 0) return <div className="empty">暂无数据</div>

      return listBuy.filter(item => item.status === '3').map(item => <Item {...props} data={item} />);
    }
  };

  return (
    <>
      <div className="background"></div>
      <div className="order">
        <NavBar title="购物订单" />
        <Tabs active={props.searchParams.get('tab') ? Number(props.searchParams.get('tab')) : 0}>
          <Tabs.TabPane key={1} title="全部">
            <div className="order-list">
              {renderContent(0)}
            </div>
          </Tabs.TabPane>
          <Tabs.TabPane key={2} title="已完成">
            <div className="order-list">
              {renderContent(3)}
            </div>
          </Tabs.TabPane>
          <Tabs.TabPane key={3} title="待发货">
            <div className="order-list">
              {renderContent(1)}
            </div>
          </Tabs.TabPane>
          <Tabs.TabPane key={4} title="待收货">
            <div className="order-list">
              {renderContent(2)}
            </div>
          </Tabs.TabPane>
        </Tabs>
      </div>
    </>
  )
}

export default Order;